<script setup lang='ts'>
import { useDoNotice, useGetBankAccountInfoMethod, useGetDetail } from '@fl/api/man-api/jc-authentication'
import { useUserStore } from '@fl/store/modules/user'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

import { AUDIT_STATUS_DICT } from './constant'
import { useStep } from './use-step'

const { stepMove } = useStep()

const userStore = useUserStore()

const detail = ref<any>({})
const route = useRoute()

// oss图片
const err = 'https://public-obs-cdn.anjulian.com.cn/2024-06-03/39e32381-3e8b-4e0c-b2f3-f156c9571e1f.png'
const success = 'https://public-obs-cdn.anjulian.com.cn/2024-06-03/19c39c9e-ab76-4970-a1cf-fe0ba4223da7.png'

const { data } = useGetDetail()

const status = computed(() => {
    const target: any = detail.value?.auditStatus ?? route.query?.auditStatus ?? 999
    // 审核状态：审核中：0，审核通过: 1，审核不通过：2, 草稿状态不需要审核: 3
    return Number(target)
})

const showBank = computed(() => {
    return detail.value?.authType === 2 && status.value === AUDIT_STATUS_DICT.REVIEWING
})

const { data: bankAccount } = useGetBankAccountInfoMethod()
function doCopy() {
    const text = `开户名称：${bankAccount.value.accountName}\r\n开户银行：${bankAccount.value.bank}\r\n开户行号：${bankAccount.value.bankCode}\r\n银行账号：${bankAccount.value.bankCardNo}`
    navigator.clipboard.writeText(text).then(() => {
        ElMessage.success('复制成功')
    }).catch((err) => {
        // 复制失败
        console.error('复制失败', err)
    })
}
const auditName = computed(() => {
    const strs: string[] = ['审核中', '审核通过', '审核不通过', '提交成功']
    const i: any = status.value
    return strs[i] ? strs[i] : ''
})

const tips = computed(() => {
    if (status.value === AUDIT_STATUS_DICT.PASS) {
        return ''
    }
    else if (status.value === AUDIT_STATUS_DICT.FORBIDDEN) {
        return data.value.rejectReason ?? '资料填写不规范,请重新填写'
    }
    else if (status.value === AUDIT_STATUS_DICT.REVIEWING || status.value === AUDIT_STATUS_DICT.DRAFT) {
        return '请等待平台管理人员审核'
    }
    else {
        return ''
    }
})

const notGo = computed(() => {
    return status.value === AUDIT_STATUS_DICT.FORBIDDEN
})

watchEffect(() => {
    if (data.value) {
        detail.value = data.value
    }
})

function goTo() {
    window.sessionStorage.setItem('AGREEMENT_CHECK', '')
    stepMove({ form: '4', step: 0 })
}

function reLogin() {
    userStore.logout('/login')
}
</script>

<template>
    <div class="px-60 py-50 mx-auto mt-20 bg-#fff w-1300">
        <p class="mb-20 text-24 c-#1D2129 font-600">
            入驻企业类型
        </p>

        <!-- isPaid -->
        <div class="text-center">
            <img :src="notGo ? err : success "
                 class="mx-auto h80 w80"
            >

            <p class="my-20 text-20 c-#1D2129 font-600">
                {{ auditName }}
            </p>

            <p class="text-18 c-#767676">
                {{ tips }}
            </p>
        </div>

        <div v-if="showBank"
             class="px-20 py-20 mx-auto mt-40 bg-#F7F8FA rounded-4 h224 w690"
        >
            <p class="mb-20 flex justify-between items-center">
                <span class="text-20 c-#1A1A1A font-600">账户信息</span>

                <span class="text-16 c-#4E5969 cursor-pointer"
                      @click="doCopy"
                >
                    <span>复制信息</span>

                    <el-icon class="ml-10 translate-y-3">
                        <CopyDocument />
                    </el-icon>
                </span>
            </p>

            <p class="mb-16 flex justify-between items-center">
                <span class="text-16 c-#767676">开户名称：</span>

                <span class="text-16 c-#1D2129 font-600">{{ bankAccount.accountName }} </span>
            </p>

            <p class="mb-16 flex justify-between items-center">
                <span class="text-16 c-#767676">开户银行：</span>

                <span class="text-16 c-#1D2129 font-600">{{ bankAccount.bank }}</span>
            </p>

            <p class="mb-16 flex justify-between items-center">
                <span class="text-16 c-#767676">开户行号：</span>

                <span class="text-16 c-#1D2129 font-600">{{ bankAccount.bankCode }}</span>
            </p>

            <p class="mb-16 flex justify-between items-center">
                <span class="text-16 c-#767676">银行账号：</span>

                <span class="text-16 c-#1D2129 font-600">{{ bankAccount.bankCardNo }}</span>
            </p>
        </div>

        <div class="mb-125 mt-50 text-center">
            <ElButton v-if="status === AUDIT_STATUS_DICT.PASS"
                      type="primary"
                      @click="reLogin"
            >
                重新登录
            </ElButton>

            <template v-else>
                <ElButton @click="stepMove()">
                    返回首页
                </ElButton>

                <ElButton v-if="notGo"
                          type="primary"
                          @click="goTo"
                >
                    重新认证
                </ElButton>
            </template>
        </div>
    </div>
</template>

<style lang="less" scoped></style>
